<template>
  <div class="page-total" ref="pageTotal" v-if="visible" style="overflow-y: auto">
    <div class="page-head" ref="pageHead">
      <el-container>
        <el-main>

          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="110px">
            <el-row type="flex">
              <el-col :span="8">
                <el-form-item label="单据前缀代码" prop="documentPrefixCode" label-width="120px">
                  <el-input v-model="dataForm.documentPrefixCode" placeholder="单据前缀代码" maxlength="20" show-word-limit
                    class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单据编号代码" prop="documentCode"  label-width="120px">
                  <el-input v-model="dataForm.documentCode" placeholder="单据编号代码" maxlength="50" show-word-limit
                    class="kuang-input" :disabled="watchEdit === 'watch' || watchEdit === 'edit'"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单据名称" prop="documentName">
                  <el-input v-model="dataForm.documentName" placeholder="单据名称" maxlength="50" show-word-limit
                    class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">

              <el-col :span="8">
                <el-form-item label="子项号连接符" prop="connector">
                  <el-input v-model="dataForm.connector" :placeholder="watchEdit === 'watch'?'':'子项号连接符'" maxlength="20" show-word-limit
                    class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="初始值" prop="initialValue">
                  <el-input v-model.number="dataForm.initialValue" placeholder="初始值" maxlength="20" show-word-limit  oninput="value=value.replace(/[^0-9]/g,'')"
                    class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当前值" prop="currentValue">
                  <el-input v-model.number="dataForm.currentValue" :placeholder="watchEdit === 'watch'?'':'当前值'" maxlength="20" show-word-limit  oninput="value=value.replace(/[^0-9]/g,'')"
                    class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="8">
                <el-form-item label="日期类型" prop="dateType">
                  <el-select class="tywidth" v-model="dataForm.dateType" clearable filterable @change="it"
                    :disabled="watchEdit === 'watch'" :placeholder="watchEdit === 'watch'?'':'日期类型'">
                    <el-option v-for="item in dateTypeList" :key="item.value" :label="item.value" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="日期示例" prop="dateExample">
                  <el-input v-model="dataForm.dateExample" :placeholder="watchEdit === 'watch'?'':'日期示例'" maxlength="20" show-word-limit
                    class="kuang-input" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="单据流水号长度" prop="documentNumLength" label-width="120px">
                  <el-input v-model.number="dataForm.documentNumLength" :placeholder="watchEdit === 'watch'?'':'单据流水号长度'" maxlength="20"
                    oninput="value=value.replace(/[^0-9]/g,'')" show-word-limit class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
                </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="8">
                <el-form-item label="子项目流水号长度" prop="subNumLength" label-width="130px">
                  <el-input v-model.number="dataForm.subNumLength" :placeholder="watchEdit === 'watch'?'':'子项目流水号长度'" maxlength="20"
                    oninput="value=value.replace(/[^0-9]/g,'')" show-word-limit class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="dataForm.remark" :rows="6" maxlength="150" show-word-limit :placeholder="watchEdit === 'watch'?'':'请输入'"
                  class="kuang-input" :disabled="watchEdit === 'watch'"></el-input>
              </el-form-item>
            </el-row>

          </el-form>
        </el-main>
      </el-container>
      <div class="footer-bottom">
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button v-if="watchEdit != 'watch'" type="primary" @click="dataFormSubmit()"
            :loading="addLoading">确定</el-button>
        </span>

      </div>
    </div>
  </div>
</template>

<script>

import documentApi from '@/api/system/documentrule.js'

export default {
  name: 'DocumentAddOrUpdate',
  props: {
    watchEdit: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      visible: false,
      dataForm: {
        id: '',
        documentPrefixCode: '',
        documentCode: '',
        documentName: '',
        initialValue: '',
        currentValue: '',
        dateType: '',
        dateExample: '',
        documentNumLength: '',
        connector: '',
        subNumLength: '',
        remark: ''
      },
      dateTypeList: [{
        value: 'yyyyMM'
      }, {
        value: 'yyyyMMdd'
      }, {
        value: 'yyMMdd'
      }, {
        value: 'MMdd'
      }],
      dataRule: {
        documentPrefixCode: [
          { required: true, message: '单据前缀代码不能为空', trigger: 'blur' },
        ],
        documentCode: [
          { required: true, message: '单据编号代码不能为空', trigger: 'blur' }
        ],
        documentName: [
          { required: true, message: '单据名称不能为空', trigger: 'blur' }
        ],
        initialValue: [
          { required: true, message: '初始值不能为空', trigger: 'blur' }
        ]
      },
      addLoading: false
    }
  },
  methods: {
    init(id) {

      this.dataForm.id = id || ''
      this.visible = true
      this.$nextTick(() => {
        this.dataForm = {
          id: '',
          documentPrefixCode: '',
          documentCode: '',
          documentName: '',
          initialValue: '',
          currentValue: '',
          dateType: '',
          dateExample: '',
          documentNumLength: '',
          connector: '',
          subNumLength: '',
          remark: ''
        }
        if (id) {
          documentApi.getById({ id: id }).then((res) => {
            const data = res.data
            if (res) {
              this.dataForm = data
              if (this.watchEdit === 'copy') {
                this.dataForm.id = ''
              }
            }
          })
        } else {

        }
      })
    },
    it() {
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var day = today.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      if (this.dataForm.dateType === 'yyyyMM') {
        this.dataForm.dateExample = year + '' + month
      } else if (this.dataForm.dateType === 'yyMMdd') {
        this.dataForm.dateExample = year.toString().substring(2) + '' + month + '' + day
      } else if (this.dataForm.dateType === 'MMdd') {
        this.dataForm.dateExample = month + '' + day
      } else {
        this.dataForm.dateExample = year + '' + month + '' + day
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.addLoading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let r
          if (this.dataForm.id) {
            r = documentApi.update(this.dataForm)
          } else {
            r = documentApi.save(this.dataForm)
          }
          r.then((res) => {
            // console.log(res)
            if (res) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(res.message)
            }
            this.addLoading = false
          }).catch((e) => {
            this.addLoading = false
          })
        } else {
          this.addLoading = false
        }
      })
    },
    cancel() { // 取消
      this.$refs['dataForm'].resetFields()
      this.$emit('changeVisible')
      this.$emit('refreshDataList')
      // Object.assign(this.dataForm, this.$options.data().dataForm)
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>

.footer-bottom {
  width: 100%;
  text-align: right;

  .footer {
    display: inline-block;
    margin-right: 1%;
  }
}

.page-total {
  padding: 0px !important;
}
</style>
